<template>
	<el-container class="main-container full-height">
		<el-aside class="side-panel">
			<widget-panel @onDragEnd="onDragEnd" />
		</el-aside>
		<el-container class="center-layout-container">
			<el-header class="toolbar-header">
				<toolbar-panel @changeConfig="changeConfig" @optDatas="optDatas" />
			</el-header>
			<el-main class="form-widget-main">
				<el-scrollbar class="container-scroll-bar">
					<comp-widget ref="compWidgetRef" :defineConfig="defineConfig" />
				</el-scrollbar>
			</el-main>
		</el-container>
		<el-aside>
			<setting-panel :defineConfig="defineConfig" />
		</el-aside>
	</el-container>
	<input
		type="file"
		ref="fileInput"
		style="display: none"
		accept=".json"
		@change="importFileChange"
	/>
	<PreviewDrawer ref="previewDrawerRef" />
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import WidgetPanel from './widget-panel/index'
import ToolbarPanel from './toolbar-panel/index'
import CompWidget from './comp-widget/index.vue'
import SettingPanel from './setting-panel/index'
import { importJson, exportJson } from '@/utils/files'
import { useHistoryStore } from '@/store/modules/history'
import PreviewDrawer from '@/components/portal/preview/index.vue'

defineOptions({
	name: 'PortalDesigner'
})

const historyStore = useHistoryStore()
const compWidgetRef = ref()
const fileInput = ref()
const previewDrawerRef = ref()

const state = reactive({
	scrollerHeight: 0,
	fieldList: []
})
let defineConfig = reactive({
	layoutType: 'PC',
	hasGrid: true
})
const changeConfig = (config: any) => {
	Object.assign(defineConfig, config)
}

const undoOrRedo = (num) => {
	historyStore.setIsHistory(true)
	historyStore.setIndex(num)
}

const optDatas = (type: string) => {
	if (type === 'undo') undoOrRedo(1)
	else if (type === 'redo') undoOrRedo(-1)
	else if (type === 'empty') compWidgetRef.value.emptyData()
	else if (type === 'save') {
		const Data = compWidgetRef.value.getData()
		console.log('designDatas: ', Data)
	} else if (type === 'import') {
		fileInput.value.click()
	} else if (type === 'export') {
		const Data = compWidgetRef.value.getData()
		exportJson(Data, 'portal-designer-data.json')
	} else if (type === 'preview') {
		const Data = compWidgetRef.value.getData()
		previewDrawerRef.value?.openDrawer(Data)
	}
}

const importFileChange = (e: any) => {
	const file = e.target.files[0]
	importJson(file).then((data) => {
		compWidgetRef.value.setData(data)
	})
}

/**
 * 左侧组件拖拽结束事件
 * @param widget 当前节点信息及鼠标位置
 * @param type 拖拽类型 1容器 2数据组件 3业务组件 4其他组件
 */
const onDragEnd = (widget: any, type: string) => {
	compWidgetRef.value?.dragEnd(widget, type)
}

const changeOptions = (options: any) => {
	if (options.type === 'layout') {
	}
}

onMounted(() => {
	state.scrollerHeight = window.innerHeight - 52 + 'px'
})
</script>

<style lang="scss" scoped>
.el-container.main-container {
	background: #fff;

	:deep(aside) {
		/* 防止aside样式被外部样式覆盖！！ */
		margin: 0;
		padding: 0;
		background: inherit;
		width: 260px !important;
		overflow-y: hidden;
	}
}

.el-container.full-height {
	height: 100vh;
	overflow-y: hidden;
}

.el-container.center-layout-container {
	min-width: 680px;
	width: calc(100vw - 520px);
	border-left: 2px dotted #ebeef5;
	border-right: 2px dotted #ebeef5;
}

.el-header.main-header {
	border-bottom: 2px dotted #ebeef5;
	height: 48px !important;
	line-height: 48px !important;
	min-width: 800px;
}

div.main-title {
	font-size: 18px;
	color: #242424;
	display: flex;
	align-items: center;
	justify-items: center;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.el-dropdown-link {
	margin-right: 12px;
	cursor: pointer;
}

div.external-link {
	display: flex;
	align-items: center;

	a {
		font-size: 13px;
		text-decoration: none;
		margin-right: 10px;
		color: #606266;
	}
}

.el-header.toolbar-header {
	font-size: 14px;
	border-bottom: 2px dotted #dcdfe6;
	height: 40px !important;
}

.el-main.form-widget-main {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	background: #fff;
	padding: 0;
	height: calc(100vh - 40px);
}

.container-scroll-bar {
	:deep(.el-scrollbar__view) {
		overflow-x: hidden;
		padding: 5px 4px 5px 5px;
	}
}
</style>
